<template>
    <div>
        <el-header>充值记录</el-header>
        <div>
            <div>时间选择:
                <el-radio-group v-model="datas" size="small" @change="datasFun">
                    <el-radio-button label=''>全部</el-radio-button>
                    <el-radio-button label='today'>今天</el-radio-button>
                    <el-radio-button label='yesterday'>昨天</el-radio-button>
                    <el-radio-button label='lately7'>最近7天</el-radio-button>
                    <el-radio-button label='lately30'>最近30天</el-radio-button>
                    <el-radio-button label='month'>本月</el-radio-button>
                    <el-radio-button label='year'>本年</el-radio-button>
                </el-radio-group>
                <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    @change="timeFun"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div>
                支付类型:
                <el-radio-group v-model="paid" size="small" @change="paidFun">
                    <el-radio-button label=''>全部</el-radio-button>
                    <el-radio-button label='1'>已支付</el-radio-button>
                    <el-radio-button label='0'>未支付</el-radio-button>
                </el-radio-group>
            </div>
            <div>
                搜索:<el-input v-model="nickname" placeholder="请输入用户昵称、订单号" style="width:200px"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="souFun"></el-button>
                <el-button icon="el-icon-upload2" @click="export2Excel()">导出</el-button>
            </div>
        </div>
        <div class="div">
            <dl class="dl" v-for="(v,i) in data" :key="i">
                <dt class="el-icon-orange"></dt>
                <dd>
                    <p>
                        <span class="span">{{v.count}}</span>
                        <span>{{v.name}}</span>
                    </p>
                </dd>
            </dl>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                sortable
                width="120">
            </el-table-column>
            <el-table-column
                prop="avatar"
                label="头像"
                width="120">
                <template slot-scope="scope"><img :src="scope.row.avatar"></template>
            </el-table-column>
            <el-table-column
                prop="nickname"
                label="用户昵称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="order_id"
                label="订单号"
                width="180">
            </el-table-column>
            <el-table-column
                sortable
                prop="price"
                label="支付金额"
                width="120">
            </el-table-column>
            <el-table-column
                prop="paid_type"
                label="是否支付"
                width="120">
            </el-table-column>
            <el-table-column
                prop="_recharge_type"
                label="充值类型"
                width="120">
            </el-table-column>
            <el-table-column
                prop="_pay_time"
                label="支付时间"
                width="120">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template slot-scope="scope">
                    <el-button
                    @click="deleteFun(scope.$index,scope.row)"
                    type="text"
                    size="small">
                    删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
         <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="limit"
            layout="total, prev, pager, next, jumper"
            @prev-click="prevclick"
            @next-click="nextclick"
            :total="count">
        </el-pagination>
    </div>
</template>
<script>
import {finance,recharge,exsolx} from '../../api/userapi'
import moment from 'moment'
export default {
    data() {
        return {
            radio3:'',
            value1: '',
            data:[],
            tableData:[],
            count:0,
            page:1,
            limit:20,
            datas:'',
            excel:0,
            nickname:'',
            paid:''
        }
    },
    methods: {
        // 导出
        export2Excel() {
            exsolx().then((res)=>{
                if(res.data.status==200){
                    require.ensure([], () => {
                        const { export_json_to_excel } = require("../../vendor/Export2Excel");
                        const tHeader = ['ID', '用户昵称', '订单号','支付金额', '是否支付','充值类型','支付时间']; //表头
                        const filterVal =  ['id', 'nickname', 'order_id','price', 'paid_type','_recharge_type','_pay_time'];//对应字段
                        const list =  this.tableData;
                        const data = this.formatJson(filterVal, list);
                        export_json_to_excel(tHeader, data, "列表excel");
                    });
                }
            })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]));
        },
        // 搜索
        souFun(){
            console.log(this.nickname);
            this.financeFun()
        },
        // 时间今天/状态
        datasFun(val){
            this.datas=val
            this.financeFun()
        },
        // 时间选择器
        timeFun(val){
            let time1=moment(val[0]).format('YYYY/MM/DD')
            let time2=moment(val[1]).format('YYYY/MM/DD')
            this.datas=`${time1}-${time2}`
            this.financeFun()
        },
        // 支付项
        paidFun(val){
            this.paid=val
            this.financeFun()
        },
        // 删除
        deleteFun(index,row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then((rec) => {
                    console.log(1);
                delefun(row.id).then((res)=>{
                    console.log(res.data);
                    if(res.data.status==200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                            duration:1000
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: '删除失败!',
                            duration:1000
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除',
                    duration:1000
                });          
            });
            
        },
        // 输入框改变页码
        handleCurrentChange(val) {
            this.page=val  
            this.financeFun()
        },
        // 上一页
        prevclick(val){
          this.page=val  
          this.financeFun()
        },
        // 下一页
        nextclick(val){
            this.page=val
            this.financeFun()
        },
        // 获取数据
        financeFun(){
            finance({datas:this.datas,paid:this.paid,nickname:this.nickname,page:this.page,excel:this.excel,limit:this.limit}).then((res)=>{
                console.log(res.data);
                if(res.data.status==200){
                    this.tableData=res.data.data.list
                    this.count=res.data.data.count
                }
            })
        },
        // 获取dl数据
        rechargeFun(){
            recharge({datas:this.datas,paid:this.paid,nickname:this.nickname}).then((res)=>{
                console.log(res.data);
                if(res.data.status==200){
                    this.data=res.data.data
                }
            })
        }
    },
    created(){
        this.financeFun()
        this.rechargeFun()
    }
}
</script>
<style lang="scss" scoped>
.el-header{
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
}
.div{
    width: 100%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom:20px;
    .dl{
        width: 24%;
        height: 100px;
        display: flex;
        background: white;
        margin: 10px 5px;
        dt{
            width: 100px;
            height: 100%;
            font-size: 30px;
            display:flex;
            justify-content: center;
            align-items: center;
        }
        dd{
            p{
                display: flex;
                flex-direction: column;
                margin-top:28px ;
                span{
                    display: inline-block;
                }
                .span{
                    font-size: 20px;
                }
            }
        }
    }
}
@media screen and (max-width:1200px) {
  .div{
    width: 100%;
    height: 240px;
    background: sandybrown;
    // display: flex;
    flex-wrap: wrap;
  }
  .dl{
    width: 48%;
    height: 100px;
    margin-top: 10px;
  }
}
img{
    width: 40px;
    height: 40px;
    display: block;
}
</style>